<template>
  <div class="map-cockpit-container">
    <div class="map-container">
      <ic-map
        v-if="icMapParams.projection"
        @ready="ready"
        :get-info-by-id="getInfoById"
        :projection="icMapParams.projection"
        :resolutions="icMapParams.resolutions"
        :resolution="icMapParams.resolution"
        :center="icMapParams.center"
      >
        <ic-map-tool v-show="false"></ic-map-tool>
        <ic-map-mask :data="wkt" :is-fit="false" :opacity="0"></ic-map-mask>
        <ic-base-map
          :enableDefault="icMapParams.enableDefault"
          :image="icMapParams.image"
          :map="icMapParams.map"
          :activeName="icMapParams.activeName"
        ></ic-base-map>
        <div class="map-timeline">
          <ic-map-timeline
            v-if="isShowTimeLine"
            :data="timeLineData"
            @timeline-panel-close="timeLineClose"
          ></ic-map-timeline>
        </div>
      </ic-map>
    </div>
    <div class="layer-detail">
      <LandClassify v-if="layerInfo.layerId === '9914'" :year="curYear"></LandClassify>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import { OneMapApi } from '@/modules/onemap/api/onemap'
import { OneMapModule } from '@/store/modules/oneMap'
import LandClassify from './landClassify1.vue'

@Component({
  name: 'MayLayer',
  components: {
    LandClassify
  }
})
export default class MapLayer extends Vue {
  @Prop({ default: {} }) layerInfo!: any
  private currentXzqCode = OneMapModule.currentXzqCode
  private olMap: any = null
  // private icMapParams: any = null
  private timeLineData: any = []
  private isShowTimeLine = false
  private curYear = ''
  private lastLayerIds = []
  private wkt = ''

  get icMapParams() {
    return OneMapModule.icMapParams
  }

  timeLineClose() {
    this.isShowTimeLine = false
  }

  @Watch('layerInfo')
  changeLayer(item: any) {
    // 移除
    this.removeLayer(this.lastLayerIds)
    this.lastLayerIds = item.layerId.split(',')
    this.startLoad(item)
  }

  ready(olMap: any) {
    this.olMap = olMap
    this.lastLayerIds = this.layerInfo.layerId.split(',')
    this.getCodeWkt()
    this.startLoad(this.layerInfo)
  }

  // 初始化加载
  startLoad(item: any) {
    if (item.type === 'time') {
      this.getTimeData(item.layerId)
    } else {
      if (item.layerId.indexOf(',') > -1) {
        this.lastLayerIds.forEach((id: string) => {
          this.olMap.addLayerById(id)
        })
      } else {
        this.olMap.addLayerById(item.layerId)
      }
      this.isShowTimeLine = false
      this.timeLineData = []
    }
  }

  removeLayer(layerIds: any) {
    layerIds.forEach((id: any) => {
      this.olMap.removeLayerById(id)
    })
  }
  //图层信息获取
  async getInfoById(layerId: string) {
    const res = await OneMapApi.getLayerDetailOne(layerId)
    return res.data?.layerInfo
  }

  // 根据行政区获取wkt
  getCodeWkt() {
    OneMapApi.getXzqByCode(this.currentXzqCode).then((res: any) => {
      this.wkt = res.data.wkt
    })
  }

  // 获取时间轴数据
  getTimeData(id: string) {
    OneMapApi.getTimeLineList(id).then((res: any) => {
      if (res.data?.length > 0) {
        this.timeLineData = res.data.slice(0, 6)
        this.isShowTimeLine = true
        this.curYear = this.timeLineData[0].date
      }
    })
  }
}
</script>

<style scoped lang="scss">
.map-cockpit-container {
  position: relative;
  width: 100%;
  height: 100%;

  .map-timeline {
    position: absolute;
    left: 13%;
    bottom: 15%;
    z-index: 20;
    width: 320px;
    ::v-deep {
      .ic-map-timieline {
        padding: 24px 4px 5px;
        border-radius: 2px;
        //background: rgba(255, 255, 255, 0.1);
        background: linear-gradient(180deg, rgba(0, 33, 96, 0.9) 0%, rgba(0, 33, 96, 0.7) 100%);
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.16);
        font-size: 12px !important;

        .time-line-container {
          margin: 0 20px;
          .main-line {
            height: 2px;
            background: rgba(255, 255, 255, 0.3) !important;
            .time-pointer {
              left: -4px;
            }
            .time-node {
              .date-line {
                top: -9px;
                left: 1px;
                background: rgba(255, 255, 255, 0.3) !important;
              }
              .date-pointer {
                width: 8px;
                -webkit-transform: translate(-8px, -8px);
                background: transparent !important;
              }
              .date-name {
                font-size: 12px !important;
                color: #fff;
                top: -30px;
                left: -18px;
              }
            }
          }
        }
        .ic-prev-btn,
        .ic-next-btn {
          display: none;
        }
      }
    }
  }

  .layer-detail {
    position: absolute;
    right: 13%;
    bottom: 15%;
    z-index: 20;
    width: 460px;
    background: linear-gradient(180deg, rgba(0, 33, 96, 0.9) 0%, rgba(0, 33, 96, 0.7) 100%);
    //background: url('~@/assets/cockpit/bb-bg.png') no-repeat 0/ 100% 100%;
    //border: 1px solid #3767b6;
  }
}
</style>
